<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <title>Boost Search Engine</title>
  <style>
    * {
      /* 设置外边距 */
      margin: 0;
      /* 设置内边距 */
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    /* "."是类选择器 */
    .container {
      width: 800px;
      /* 通过设置外边距达到居中的目的 */
      margin: 0px auto;
      /* 设置上边距 */
      margin-top: 30px;
    }

    /* 复合选择器 */
    .container .search {
      width: 100%;
      height: 52px;
    }

    /* 选择input标签 */
    .container .search input {
      float: left;
      width: 600px;
      height: 50px;
      border: 2px solid #ccc;
      border-right: none;
      /* 设置内边距,不让里面的字离左边太近 */
      padding-left: 10px;
      color: #ccc;
      font-size: 15px;
    }

    .container .search button {
      float: left;
      width: 150px;
      height: 53px;
      /* boutton边框样式和背景 */
      border: 2px solid #2070A0;
      /* button背景色 */
      background-color: #2070A0;
      /* button字体色 */
      color: #fff;
      /* 字体大小 */
      font-size: 19px;
    }

    .container .search button:hover {
      border: 2px solid #6b9d68;
      /* button背景色 */
      background-color: #6b9d68;
      /* button字体色 */
      color: #fff;
    }

    .container .result .item {
      margin-top: 20px;
    }

    .container .result .item a:hover {
      text-decoration: underline;
      color: #6b9d68;
    }

    .container .result .item a {
      /* 去掉下划线 */
      text-decoration: none;
      /* a标签文字大小 */
      font-size: 20px;
      /* 设置文字颜色 6b9d68*/
      color: #2070A0;
      /* 设置为块级元素，单独占一行 */
      display: block;
    }



    .container .result .item p {
      /* 摘要字体大小 */
      font-size: 13px;
      /* 摘要字体 */
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin-top: 5px;
    }

    .container .result .item i {
      /* url字体样式 */
      font-style: normal;
      /* url字体颜色 */
      color: #6b9d68;
      /* 设置为块级元素，单独占一行 */
      display: block;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="search">
      <input type="text" value="请输入搜索关键字...">
      <button onclick="Search()">搜索</button>
    </div>
    <div class="result">
      <!-- 想要动态生成网页内容 -->
      <!-- <div class="item">
        <a href="#">这是标题</a>
        <p>这是摘要这是摘要这是摘要这是摘要</p>
        <i>http//:url</i>
      </div>
      <div class="item">
        <a href="#">这是标题</a>
        <p>这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要</p>
        <i>http//:url</i>
      </div><div class="item">
        <a href="#">这是标题</a>
        <p>这是摘要这是摘要这是摘要这是摘要</p>
        <i>http//:url</i>
      </div><div class="item">
        <a href="#">这是标题</a>
        <p>这是摘要这是摘要这是摘要这是摘要</p>
        <i>http//:url</i>
      </div><div class="item">
        <a href="#">这是标题</a>
        <p>这是摘要这是摘要这是摘要这是摘要</p>
        <i>http//:url</i>
    </div> -->
    </div>
  </div>
  <script>
    function Search() {
      // alert("hello");
      // 1. 提取数据, $可以说是JQuery的别称
      let query = $(".container .search input").val();
      console.log("quert = " + query); // console 是浏览器的对话框，可以看数据

      // 2.发起http请求,属于一个和后端进行交互的函数
      $.ajax({
        type: "GET",
        url: "/s?word=" + query,
        success: function (data) {
          console.log(data);
          BuildHtml(data);
        }

      });
    }
    function BuildHtml(data) {
      // 获取html中的result标签
      let result_label = $(".container .result");
      // 清空历史搜索结果
      result_label.empty();

      for (let elem of data) {
        // for debug
        // console.log(elem.title);
        // console.log(elem.url);
        let a_label = $("<a>", {
          text: elem.title,
          href: elem.url,
          // 跳转到新页面
          target: "_blank"
        });
        let p_label = $("<p>", {
          text: elem.desc
        });
        let i_label = $("<i>", {
          text: elem.url
        });
        let div_label = $("<div>", {
          class: "item"
        });
        a_label.appendTo(div_label);
        p_label.appendTo(div_label);
        i_label.appendTo(div_label);
        div_label.appendTo(result_label);
      }
    }
  </script>

</body>

</html>